<template>
<div>
  <div class="box">
    <div class="title">
      <h2 >题库管理</h2>
      <el-button  @click="adddatabase"  type="primary" >创建题库</el-button>
    </div>
    <!-- s搜索 -->
    <div class="top">
      题库名称：<el-input v-model="form.key"  placeholder="请输入题库名称" />
      创建人:<el-input  v-model="form.admin" placeholder="请输入创建人" />
      <el-checkbox  />只看我创建的
      <el-button type="primary" @click="seach">查询</el-button>
      <el-button type="danger" disabled>批量删除</el-button>
    </div>
    <!-- 表格 -->
    <div class="table">
        <mytable :tableHead="tableHead" :tableData="tableData" @question="getquestion" @del="del" @edit="handleEdit">

        </mytable>
    </div>
    <!-- 分页 -->
    <div class="page">
      <pages
        :total="total"
        :page="form.page"
        :pageSize="form.psize"
        @changePageSize="handleSizeChange"
        @changePage="handleCurrentChange"
      />

    </div>
      <!-- 创建题库 弹出框 -->
    <div >
        <el-dialog
          v-model="dialogVisible"
          :title="isAdd?'试题添加':'修改'"
          width="40%"
        >
          <createBaseList  v-if="dialogVisible"
                @close="close"
                @refresh="refreshfn"
                :isAdd="isAdd"
                :id="id"></createBaseList>
    
        </el-dialog>
      </div>
  </div>
</div>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import {  databaselist,databaseDel,databaseAdd} from "../../api/index";
import router from "../../router/router";
import { ElMessage,ElMessageBox ,type FormInstance, type FormRules} from "element-plus";
import pages from './../../components/pages/pages.vue'
import mytable from './../../components/table/tableAdmin.vue'
import createBaseList from './../../components/questiondetails/createBaseList.vue'


const background = ref(true)
let total=ref(0)//分页

interface User {
  id: number
  title: string
  address: string,
  limits:[]
}
const ruleFormRef = ref<FormInstance>()

const form =reactive({
  
  admin:'',
  page:1,
  psize:10,
  key:'',
  
})
const data=reactive({
  id:0,
  title:'',
  isshow:0,
  limits:[],
  // admin:userinfo.admin_name
})
const id=0
let dialogVisible = ref(false)//弹出框
// 取消 关闭对话框
const close = (e: boolean) => {
  dialogVisible.value = e;

  console.log("取消");
  getlist()
};
 // 确定 关闭对话框 并刷新页面
 const refreshfn = (e: boolean) => {
  // console.log(e);
  dialogVisible.value = e;
  getlist()
 
};
// 编辑
const handleEdit = (index: number, row: User) => {
  console.log(index, row)
  dialogVisible.value=true
  data.title=row.title
  data.id=row.id
}
// 分页
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  form.psize=val
  getlist()
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  form.page=val
  getlist()
}
const tableData=ref([])
const tableHead: any[] = [
  {
    label: '题库',
    prop: 'title',
    // event: 'question',
    // type: 'primary',
    // show: true,
  },
  {
    label: '题量数目',
    prop: 'counts',
  },
  {
    label: '创建时间',
    prop: 'addtime',
  },
  {
    label: '创建人',
    prop: 'admin',
  },
 
  {
    label: '操作',
    type: 'button',
    buttons: [
    {
        text: '试题',
        event: 'question',
        type: 'primary',
        show: true,
      },
      {
        text: '编辑',
        event: 'edit',
        type: 'primary',
        show: true,
      },
      {
        text: '删除',
        event: 'del',
        type: 'primary',
        show: true,
      },
    ],
  },
];
// 获取列表
const getlist=async ()=>{
  let res:any=await databaselist(form)
  // console.log(res);
  if(res.errCode===10000){
    tableData.value=res.data.list
    total.value=res.data.counts
  }
}
getlist()

// 查询
const seach=()=>{
  getlist()
}
// 删除题库
const del=async (ids:any)=>{
  const {id}=ids
  
  let res:any=await databaseDel({id:id})
  // console.log(res);
  if(res.errCode==10000){
    ElMessage.success('删除成功')
    getlist()
  }
  
}
// 校验
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],})
// 跳转试题
const getquestion=(data:any)=>{  
  // console.log(data);
  let datas=JSON.stringify(data)
  router.push({path:'./databasequestionlist', query: {data:datas}})

}
// 
const changelimits=(e:any)=>{
  // console.log(e);
  data.limits=e.detail
  
}
// true添加 false修改
const isAdd = ref(true);
// 添加
const adddatabase=async ()=>{
  isAdd.value = true;
  getlist()
  dialogVisible.value=true

  
}
</script>

<style scoped lang='less'>
.box{
  .title{
    display: flex;
    justify-content:space-between;
    h2{
    font-weight: normal;
  }
  }
  .top{
    display: flex;
    width: 1000px;
    height: 50px;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
    padding: 0 5px;
    .el-input{
      width: 200px;
      height: 30px;
      margin: 0 5px;
    }

    .el-button{
      margin: 0 5px;
    }
  }
  .page{
    width: 500px;
    margin: 15px auto;
  }
  .action{
    cursor:pointer;
  }
}
</style>